<template>
  <div class="user_login" :style="{ height: evieHeight}">
  <div class="input">
    <div class="search">
      <icon class="first_icon" type="search" />
      <input type="text" placeholder="请输入机架编号" v-model="Uname">
    </div>
    <div class="search_2" @click="souSuo">搜索</div>
  </div>
  <div v-show="show==0">
    <img class="img2" src="../../../static/img/login/kong.png">
    <div class="tiS">暂无搜索结果</div>
  </div>

   <div v-if="selectTime==1">
     <shiJ @dsplay1='dsplay1' @dsplay2='dsplay2'  :message='quf'></shiJ>
   </div>
   <div class="box" v-show="show==1">
     <div class="boxa">
       <div>机架编号</div>
       <div>{{number ? number : "无"}}</div>
     </div>
     <div class="boxa">
       <div>客户姓名</div>
       <div>{{uName ? uName : "无"}}</div>
     </div>
    <div class="boxb">
       <div>掉线时间</div>
       <div @click="selectTime1">{{diaox1}}</div>
       <div>
         <img src="../../../static/img/opration/right.png">
       </div>
     </div>
     <div class="boxb">
       <div>上线时间</div>
       <div @click="selectTime2">{{shangx1}}</div>
       <div>
         <img src="../../../static/img/opration/right.png">
       </div>
     </div>
     <div class="boxb">
       <div>掉线原因</div>
       <div>
         <picker @change="bindPickerChange" :value="index1" :range="array">
            <view class="picker">
              {{array[index1]}}
            </view>
         </picker>
       </div>
       <div>
         <img src="../../../static/img/opration/right.png">
       </div>
     </div>
     <div class="tJ" @click="tJ">提交</div>
     </div>
   </div>
  </div>
</template>

<script>
import js from '../../utils/js'
import shiJ from "../../components/shiJ.vue";
export default {
	data() {
		return {
		Uname: "",
		index1: 0,
		array: [
			"显卡问题",
			"矿机过热",
			"电信断网",
			"水电站断电",
			"风扇故障",
			"矿机维修",
			"其他原因"
		],
		evieHeight: "",
		yuanY: "显卡问题", //已选原因,
		//掉线时间
		diaox1: "请选择掉线时间",
		diaox2: "", //已选择掉线时间
		//上线时间
		shangx1: "请选择上线时间",
		shangx2: "", //已选择上线时间
		quf: "",
		selectTime: 0,
		show: 0,
		//机架编号
		number: "",
		//用户姓名
		uName: "",

		uid:'',
		id:'',
		number:'',
		mid:''
		};
	},

	components: {
		shiJ
	},
	mounted() {
		this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
	},
	methods: {
		bindPickerChange(e) {
		this.index1 = e.mp.detail.value;
		this.yuanY = this.array[e.mp.detail.value];
		},
		dsplay1(e) {
			this.selectTime = e;
			if (e[2] == 1) {
				this.diaox1 = e[1];
				this.diaox2 = e[3];
			}
			if (e[2] == 2) {
				this.shangx1 = e[1];
				this.shangx2 = e[3];
			}
			console.log(e);
		},
		dsplay2(e) {
		this.selectTime = e;
		this.biaoH = e[1];
		},
		selectTime1() {
		this.selectTime = 1;
		this.quf = 1;
		},
		selectTime2() {
		this.selectTime = 1;
		this.quf = 2;
		},
		tJ() {
			if (this.diaox2 == "") {
				wx.showToast({
				title: "请选择掉线时间",
				icon: "none"
				});
				return;
			}
			if (this.shangx2 == "") {
				wx.showToast({
				title: "请选择上线时间",
				icon: "none"
				});
				return;
			}
			if (this.yuanY == "") {
				wx.showToast({
				title: "请选择原因",
				icon: "none"
				});
				return;
			}
			if (this.diaox2 > this.shangx2) {
				wx.showToast({
				title: "掉线时间不可大于上线时间",
				icon: "none"
				});
				return;
			}
			let self = this;
			if(this.diaox2 && this.shangx2 && this.diaox2 != '' && this.shangx2 !=""){
				//this.$API = js(wx);	
				this.$API
					.post(
					"/Operation/postDrops",
					{
						type: "drops",
						uid: this.uid,
						mid: this.mid,
						frame_num: this.number,
						fid: this.id,
						drop_line_time: this.diaox2,
						on_line_time:this.shangx2,
						content: this.yuanY,
						token: wx.getStorageSync("user_token"),
						user_id: wx.getStorageSync("user_id")
					}
					//true
					)
					.then(res => {
						self.show = 0;
						this.initData();
						wx.hideLoading();
						wx.showToast({
							title:"提交成功"
						});
				});
			}else{
				wx.showToast({
					title:"时间选择错误",
					icon:"none"
				});
			}
			
		},
		initData(){/* 清空输入数据 */
			this.Uname = this.name = "";
			this.diaox1 = "请选择掉线时间";
			this.shangx1 = "请选择上线时间";
			this.yuanY = "显卡问题";
			this.index1 = 0;
		},
		souSuo() {
		if (this.Uname.trim() == "") {
			wx.showToast({
				title: "搜索前请先输入机架编号",
				icon: "none"
			});
			return;
		}
		//wx.showLoading();
		let self = this;
		//this.$API = js(wx);
		this.$API
			.post("/Operation/informationRetrieval",
			{
				type: "information",
				frame_num: this.Uname,
				token: wx.getStorageSync("user_token"),
				user_id: wx.getStorageSync("user_id")
			})
			.then(res => {
				
				if(res.status == 0){
					self.show = 1;
					self.uName = res.result.user_name;
					self.number = res.result.number;
					self.uid =  res.result.uid;
					self.id = res.result.id;
					self.mid = res.result.mid;
				}else{
					wx.showToast({
						title:res.data.msg
					});
				}
				
				wx.hideLoading();
			});
		}
	},
	onUnload(){
		this.Uname = "";
	},
	watch: {
		Uname(a, b) {
		if (a == "") {
			this.show = 0;
		}
		}
	},
	created() {}
};
</script>

<style scoped>
.user_login {
  width: 750rpx;
  position: relative;
  overflow: hidden;
  background-color: white;
}
.input {
  width: 750rpx;
  height: 88rpx;
  background-color: #e5e5e5;
  font-size: 28rpx;
}
.first_icon {
  width: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
}
.search {
  width: 600rpx;
  float: left;
  height: 60rpx;
  border-radius: 60rpx;
  background-color: rgb(243, 239, 239);
  margin-left: 30rpx;
  margin-top: 14rpx;
}
.search input {
  height: 40rpx;
  margin-left: 70rpx;
  margin-top: 10rpx;
}
.first_icon {
  float: left;
  margin-left: 10rpx;
}
.search_2 {
  width: 90rpx;
  float: left;
  text-align: right;
  line-height: 88rpx;
}
.img2 {
  width: 212rpx;
  height: 166rpx;
  margin-left: 269rpx;
  margin-top: 150rpx;
}
.tiS {
  text-align: center;
  color: #999999;
  font-size: 24rpx;
}
.boxa,
.boxb {
  width: 720rpx;
  height: 100rpx;
  margin-left: 30rpx;
  border-bottom: 2rpx solid #e5e5e5;
  box-sizing: border-box;
}
.boxa > div {
  width: 345rpx;
  float: left;
  line-height: 100rpx;
}
.boxa > div:nth-of-type(1) {
  font-weight: bolder;
  font-size: 32rpx;
}
.boxa > div:nth-of-type(2) {
  font-size: 32rpx;
  text-align: right;
  color: #999999;
}
.boxb div:nth-of-type(1) {
  font-weight: bolder;
  font-size: 32rpx;
  float: left;
  line-height: 100rpx;
  width: 200rpx;
}
.boxb div:nth-of-type(2) {
  text-align: right;
  color: #999999;
  font-size: 32rpx;
  float: left;
  line-height: 100rpx;
  width: 430rpx;
}
.boxb img {
  width: 40rpx;
  height: 40rpx;
}
.boxb div:nth-of-type(3) {
  font-weight: bolder;
  font-size: 32rpx;
  float: left;
  margin-left: 30rpx;
  margin-top: 30rpx;
}
.tJ {
  width: 560rpx;
  height: 80rpx;
  color: white;
  font-size: 32rpx;
  background-color: #20c9e1;
  text-align: center;
  line-height: 80rpx;
  border-radius: 8rpx;
  margin-left: 95rpx;
  margin-top: 100rpx;
  position: absolute;
}
</style>
